<template>
	<view class="beijingse">
		<!-- 查看物流单号 -->
		<u-popup :show="show" @close="show=false" :round="10" mode="center">
			<view class="mainpadding">
				<view class=" zhonghei textcenter" style="font-size: 40rpx;">物流单号</view>
				<view class="wulbox flexcenter margin_top5">
					<view class="">
						<view class="textcenter zhonghei sanshier">{{wl_data.express_name}}</view>
						<view class="textcenter zhonghei sanshier margin_top1"> {{wl_data.express_no}}</view>
					</view>
				</view>
				<view class="flexcenter  margin_top6">
					<view class="henhbtn flexcenter" @click="copy(wl_data.express_name+wl_data.express_no)">点击复制</view>
				</view>
			</view>
		</u-popup>
		<!-- 查看核销码 -->
		<u-popup :show="hxshow" @close="hxshow=false" :round="16" mode="center">
			<view class="hxbox">
				<view class="flexcenter">
					<uqrcode ref="uqrcode" canvas-id="qrcode" @click="ewmfn" v-bind:value="order_hxurl+'?hx_code='+hx_code"
						:options="{ margin: 10}" size="120">
					</uqrcode>
				</view>
				<view class="wulbox1 flexcenter margin_top4">
					<view class="ershil xiaohui margin_right3">核销码：
					<text class="ershil zhonghei fonweight">{{hx_code}}</text>
					</view>
					<view class="xiaocheng smalltext ztxhx" @click="copy(hx_code)">复制</view>
				</view>
				<view class="xiaohui smalltext margin_top textcenter">*为保障您的权益<br>未到店消费前请不要将核销码提供给商家</view>
			</view>
		</u-popup>
		<u-sticky bgColor="#ffffff">
			<u-tabs :list="list1" lineColor="#FF9341" @click="changetab" :current="current" :activeStyle="{
				    color: '#000000',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				            color: '#666666',
							fontWeight: '500',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 10px; padding-right: 10px; height: 44px;"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<template v-if="tabsid!=6">
				<view class="ffffff radius margin_top mainpadding" v-for="item in list.data" :key="item.id" @click="tzddxq(item.id)">
					<!-- state 1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单(已弃用),6=已完成,7=已取消,8=取消审核中 -->
					<!-- buy_type 1=实物商品,2=虚拟商品 -->
					<!-- order_type 1到店自提，2物流配送 -->
					<view class="flexbetween">
						<view class="ershiba zhonghei">订单编号：{{item.order_no}}</view>
						<view class="ershiba xiaohong" v-if="item.state==1">待支付</view>
						<view class="ershiba zhonghei" v-if="item.pt_status==10">待分享</view>
						<template v-else>
							<view class="ershiba zhonghei" v-if="item.state==2 && item.order_type==2">待发货</view>
							<view class="ershiba zhonghei" v-if="item.state==2 && item.order_type==1">备货中</view>
						</template>
						<view class="ershiba xiaocheng" v-if="item.state==3 && item.order_type==1">待核销</view>
						<view class="ershiba xiaocheng" v-if="item.state==3 && item.order_type==2">待收货</view>
						<view class="ershiba xiaolv"  v-if="item.state==4">待评价</view>
						<view class="ershiba xiaolv"  v-if="item.state==6">已完成</view>
						<view class="ershiba xiaohui" v-if="item.state==7">已取消</view>
					</view>
					<view class="xiahuaxian">
						<view class="flexbetween margin_top " v-for="ite in item.goods" :key="ite.id">
							<image class="sptp" :src="ite.image_text" mode=""></image>
							<view class="" style="width: 77%;">
								<view class="ershiba xiaohei yhxk">{{ite.title}}</view>
								<view class="flexbetween margin_top4">
									<view class="titletext xiaohong fonweight">¥{{ite.price}}</view>
									<view class="ershil xiaocheng">x{{ite.number}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="strongtext xiaohei margin_top textright">共计{{item.goods_num}}件商品 合计
						<text class="xiaocheng titletext nofonweight">￥{{item.pay_price}}</text>
					</view>
					<view class="flexright margin_top">
						<!-- state 1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单(已弃用),6=已完成,7=已取消,8=取消审核中 -->
						<!-- buy_type 1=实物商品,2=虚拟商品 -->
						<!-- order_type 1到店自提，2物流配送 -->
						<view class="qxbtn flexcenter margin_left" v-if="item.state==1 || item.state==2"  @click.stop="cancelorder(item.id)">取消订单</view>
						<view class="xhbtn flexcenter margin_left" v-if="item.state==1"  @click.stop="payment(item)">立即支付</view>
						<view class="qxbtn flexcenter margin_left" v-if="item.state==3 && item.order_type==2" @click.stop="wl_data=item;show = true">查看物流</view>
						<view class="qxbtn flexcenter margin_left" v-if="item.state==6 || item.state==7" @click.stop="deleteorder(item.id)">删除订单</view>
						<view class="xhbtn flexcenter margin_left" v-if="item.state==3 && item.order_type==2" @click.stop="shouhuo(item.id)">确认收货</view>
						<view class="xhbtn flexcenter margin_left" @click.stop="tzljpj(item.id)" v-if="item.state==4">立即评价</view>
						<!-- is_openfp是否开发票:0=否,1=是 -->
						<!-- openfg_status开具发票状态:1=未开具,2=开具中,3=已开具 -->
						<view class=""v-if="(item.state==4 || item.state==6) && item.is_openfp==1">
							<view class="xhbtn flexcenter margin_left" v-if="item.openfg_status==1" @click.stop="kaijufp(item.id)">开具发票</view>
							<view class="qxbtn flexcenter margin_left" v-if="item.openfg_status==2">发票开具中</view>
							<view class="xhbtn flexcenter margin_left" v-if="item.openfg_status==3" @click.stop="tzxq(item.user_fp_id,item.id)">查看发票</view>
						</view>
						<view class="qxbtn flexcenter margin_left" @click.stop="cancelorder(item.id)" v-if="item.state==3 && item.buy_type==2">取消订单</view>
						<view class="xhbtn flexcenter margin_left" @click.stop="hx_code=item.hx_code;hxshow = true" v-if="item.state==3 && item.order_type==1">查看券码</view>
						<view class="xhbtn flexcenter margin_left" v-if="item.state==2 && item.pt_status==10" @click.stop="tzljfx(item.wanlshop_group_id)">立即分享</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="ffffff radius margin_top mainpadding" v-for="item in list.data" :key="item.id" @click="tuikuanxq(item.id)">
					<!-- 1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单(已弃用),6=已完成,7=已取消,8=取消审核中 -->
					<!-- 1=实物商品,2=虚拟商品 -->
					<view class="flexbetween">
						<view class="ershiba zhonghei">订单编号：{{item.order.order_no}}</view>
						<view class="ershiba xiaohui" v-if="item.state==0">等待商家处理</view>
						<view class="ershiba xiaohuang" v-if="item.state==1">等待买家寄回</view>
						<view class="ershiba xiaohuang" v-if="item.state==6">等待卖家收货</view>
						<view class="ershiba xiaohong" v-if="item.state==2">卖家拒绝退款</view>
						<view class="ershiba xiaolv" v-if="item.state==4">退款成功</view>
						<view class="ershiba xiaohui" v-if="item.state==5">退款关闭</view>
					</view>
					<view class="xiahuaxian">
						<view class="flexbetween margin_top " v-for="ite in item.goods" :key="ite.id">
							<image class="sptp" :src="ite.image_text" mode=""></image>
							<view class="" style="width: 77%;">
								<view class="ershiba xiaohei yhxk">{{ite.title}}</view>
								<view class="flexbetween margin_top4">
									<view class="titletext xiaohong fonweight">¥{{ite.price}}</view>
									<view class="ershil xiaocheng">x{{ite.number}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flexright margin_top">
						<view class="qxbtn flexcenter margin_left" v-if="item.state==0"  @click.stop="cancelorderth(item.id)">取消申请</view>
						<view class="xhbtn flexcenter margin_left" v-if="item.state==1"  @click.stop="tztxdh(item.id)">填写单号</view>
						<view class="qxbtn flexcenter margin_left" v-if="item.state==2 || item.state==4 || item.state==5" @click.stop="deleteorderth(item.id)">删除订单</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [{
						name: '全部',
						id: 0,
					},
					{
						name: '待付款',
						id: 1,
					},{
						name: '待分享',
						id: 2,
					},
					{
						name: '待发货',
						id: 3,
					},
					{
						name: '待收货',
						id: 4,
					},
					{
						name: '已完成',
						id: 5,
					},{
						name: '退款',
						id: 6,
					}
				],
				current: 0,
				tabsid:0,
				show: false, //物流
				hxshow: false, //核销码
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				hx_code:"",//核销码连接
				wl_data:{},
				order_hxurl:""
			}
		},
		onLoad(option) {
			let _this = this
			this.current = option.i
			this.tabsid = option.i
			
		},
		onShow() {
			this.init()
			this.getsyetem()
		},
		methods: {
			tzxq(id,pid) {
				uni.navigateTo({
					url: '/pages_wode/fapiaoxq?data_type=2&id='+id+"&pid="+pid
				})
			},
			kaijufp(id){
				uni.navigateTo({
					url:"/pages_wode/kaijufp?data_type=2&id="+id
				})
			},
			getsyetem(){
				httpRequest.request('/api/index/getConfigInfo', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.order_hxurl = res.data.order_hxurl
				})
			},
			cancelorderth(id) {
				httpRequest.modal('提示', '是否确认取消当前订单', true, (resp) => {
					if (resp) {
						httpRequest.request('/api/order/closeRefund', 'POST', {
							id: id,
						}).then(res => {
							httpRequest.toast(res.msg)
							if(res.code==1){
								this.init()
							}
						})
					}
				})
			},
			deleteorderth(id) {
				httpRequest.modal('提示', '是否确认删除当前订单', true, (resp) => {
					if (resp) {
						httpRequest.request('/api/order/delRefundOrder', 'POST', {
							id: id,
						}).then(res => {
							httpRequest.toast(res.msg)
							if(res.code==1){
								this.init()
							}
						})
					}
				})
			},
			tztxdh(id){
				uni.navigateTo({
					url:'/pages_wode/tianxiedh?id='+id
				})
			},
			tuikuanxq(id){
				uni.navigateTo({
					url:"/pages_wode/tuihuoxq?id="+id
				})
			},
			ewmfn() {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						console.log(res);
						var i = [res.tempFilePath]; //获取当前页面的轮播图数据
						//uniapp预览轮播图
						uni.previewImage({
							current: 0, //预览图片的下标
							urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						})
					}
				});
			},
			payment(item){
				let data = {
					id: item.id,
					pay_price: item.pay_price,
					type: 4,
				}
				uni.navigateTo({
					url: '/pages_shouye/dingdanzf?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			cancelorder(id) {
				httpRequest.modal('提示', '是否确认取消当前订单', true, (resp) => {
					if (resp) {
						httpRequest.request('/api/order/cancelOrder', 'POST', {
							order_id: id,
						}).then(res => {
							httpRequest.toast(res.msg)
							if(res.code==1){
								this.init()
							}
						})
					}
				})
			},
			shouhuo(id){
				httpRequest.modal('提示', '是否确认收货', true, (resp) => {
					if (resp) {
						httpRequest.request('/api/order/confirmOrder', 'POST', {
							id: id,
						}).then(res => {
							httpRequest.toast(res.msg)
							if(res.code==1){
								this.init()
							}
						})
					}
				})
			},
			deleteorder(id){
				httpRequest.modal('提示', '是否确认删除当前订单', true, (resp) => {
					if (resp) {
						httpRequest.request('/api/order/delOrder', 'POST', {
							id: id,
						}).then(res => {
							httpRequest.toast(res.msg)
							if(res.code==1){
								this.init()
							}
						})
					}
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					state: this.tabsid
				}
				let url = '/api/order/getOrderList'
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				if(this.tabsid==6){
					url = "/api/order/refundList"
					delete data.state
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 跳转立即分享
			tzljfx(id){
				uni.navigateTo({
					url:'/pages_shouye/pindanxq?id='+id
				})
			},
			// 跳转立即评价
			tzljpj(id){
				uni.navigateTo({
					url:'/pages_wode/fabiaopj?type=1&id='+id
				})
			},
			
			// 跳转订单详情
			tzddxq(id) {
				uni.navigateTo({
					url: '/pages_wode/dingdanxq?id='+id
				})
			},
			changetab(e){
				this.tabsid = e.id;
				this.current = e.index
				this.init()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ztxhx{
		text-decoration: underline;
	}
	.hxewm{
		width: 251rpx;
		height: 251rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.hxbox {
		background-size: 100% 100%;
		background-image: url('@/static/images/system/hxm.png');
		padding: 140rpx 36rpx 30rpx;
		box-sizing: border-box;
	}

	.henhbtn {
		width: 420rpx;
		height: 81rpx;
		background-color: #FF9341;
		border-radius: 120rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
.wulbox1{
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	border: 1rpx solid #DFDFDF;
	width: 471rpx;
	height: 74rpx;
}
	.wulbox {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1rpx solid #DFDFDF;
		width: 600rpx;
		height: 158rpx;
	}

	.xhbtn {
		width: 170rpx;
		height: 67rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
		border-radius: 120rpx;
		border: 2rpx solid #FF9341;
	}

	.qxbtn {
		width: 170rpx;
		height: 67rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		border-radius: 120rpx;
		border: 2rpx solid #666666;
	}

	.sptp {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}
</style>